<template>
  <div class="box">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item to="/login" replace>首页</el-breadcrumb-item>
      <el-breadcrumb-item>平台运营</el-breadcrumb-item>
      <el-breadcrumb-item to="/login/operation/financialRedEnvelope" replace>理财红包设置</el-breadcrumb-item>
      <el-breadcrumb-item>新增理财红包</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tableBox">
      <div class="tableTitle">新增理财红包</div>
      <div class="table">
        <div class="title"><span>基本信息</span></div>
        <el-form :model="redEnvelopeInfo" size="mini" label-width="150px" label-position="left">
          <el-form-item label="红包名称">
            <el-input v-model="redEnvelopeInfo.name"></el-input>
            <span>输入红包名称</span>
          </el-form-item>
          <el-form-item label="绑定理财标的编号">
            <el-input v-model="redEnvelopeInfo.title"></el-input>
            <span>输入理财标的编号</span>
          </el-form-item>
          <el-form-item label="红包总数量">
            <el-input v-model="redEnvelopeInfo.title"></el-input>
            <span>输入整数</span>
          </el-form-item>
          <el-form-item label="门槛金额">
            <el-input v-model="redEnvelopeInfo.title"></el-input>
            <span>输入数字，做多两位小数</span>
          </el-form-item>
          <el-form-item label="活动时间起">
            <el-date-picker v-model="redEnvelopeInfo.title" type="date" placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="活动时间止">
            <el-date-picker v-model="redEnvelopeInfo.title" type="date" placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="首页推广图">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess">
              <el-button type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="理财详情图">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess">
              <el-button type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="详情背景图">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess">
              <el-button type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="背景颜色">
            <el-input v-model="redEnvelopeInfo.title"></el-input>
            <span>如#FFB6C1</span>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">确认保存</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData">
        <el-table-column prop="name" label="红包名称" align="center"></el-table-column>
        <el-table-column prop="" label="理财标名/理财id" align="center"></el-table-column>
        <el-table-column prop="" label="红包总数量" align="center"></el-table-column>
        <el-table-column prop="" label="门槛金额" align="center"></el-table-column>
        <el-table-column prop="" label="活动时间起" align="center"></el-table-column>
        <el-table-column prop="" label="活动时间止" align="center"></el-table-column>
        <el-table-column prop="" label="背景颜色" align="center"></el-table-column>
        <el-table-column prop="" label="首页推广图" align="center"></el-table-column>
        <el-table-column prop="" label="理财详情图" align="center"></el-table-column>
        <el-table-column prop="" label="详情背景图" align="center"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        redEnvelopeInfo: {},
        tableData: []
      }
    },
    watch: {
      redEnvelopeInfo (item) {
        let list = []
        list.push(item)
        this.tableData = list
      }
    },
    created () {
    },
    methods: {
      handleRemove (file, fileList) {
        console.log(file, fileList)
      },
      handlePreview (file) {
        console.log(file)
      },
      handleSuccess (res, file) {
        console.log(res, file)
      }
    }
  }
</script>

<style lang="less" ref="stylesheet/less" scoped>
  .table {
    .title {
      margin: 0 20px;
      font-size: 18px;
      border-bottom: 1px solid #eee;

      span {
        padding: 15px 0;
        border-bottom: 2px solid #2e78f2;
        margin-bottom: -1px;
      }
    }

    .el-form {
      padding: 20px;

      .el-form-item {
        color: #666;

        /deep/ label {
          color: red;
          font-size: 16px;
        }

        span {
          font-size: 16px;
        }

        .el-input {
          width: 50%;
          padding-right: 20px;
        }

        .upload-demo {
          .el-button {
            vertical-align: top;
          }

          /deep/ .el-upload-list {
            vertical-align: top;
            width: 50%;
            display: inline-block;

            /deep/ .el-upload-list__item {
              margin-top: 0;
              line-height: 28px;
            }
          }
        }
      }
    }
  }
</style>
